如何用原生JS封装Ajax

您所在的位置：网站首页 › js 封装ajax › 如何用原生JS封装Ajax

如何用原生JS封装Ajax

#如何用原生JS封装Ajax| 来源: 网络整理| 查看: 265

编写Ajax的四个步骤：

1、创建Ajax对象；

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari

2、发送请求（准备资料，真正发送）；

send()

3、连接服务器；

4、接收服务器返回的数据，进一步分析处理，然后进行DOM的操作；

异步请求必须处理readystatechange事件。在异步请求中，XMLHttpRequest对象提供了readyState属性，该属性包含一个数值，每个值都代表请求生存期中的特定状态（http就绪状态）。如：

0：已经创建对象，但还没有调用open()方法。1：已经调用open()方法，但还没有发送请求。2：请求已经发送，标题和状态已经收到，并可用。3：接收到来自服务器的响应。4：接收完请求数据，表示已经完成请求。 IE7+：1，2，3，4 。没有0。其他浏览器：2，3，4 。没有0和1。

在web浏览器中您可能经常看到过这几个状态码： 200：存在请求文件 401：未经授权403：禁止访问404：没有找到网页

原生未封装的Ajax函数如下：

get方式完整代码如下：

window.οnlοad=function(){ function $(id){ return document.getElementById(id); } function getXHR(){ //1号线：创建ajax对象 var oAjax; if(window.XMLHttpRequest){ //IE7+, Firefox, Chrome, Opera, Safari oAjax=new XMLHttpRequest(); } else{ oAjax=new ActiveXObject("Microsoft.XMLHTTP") } return oAjax; } //验证ajax对象是否创建成功 $('btn').οnclick=function(){ var xhr=getXHR(); //2号线：发送请求(准备资料，真正的发送) //open(get,url,true) //第一个参数：数据传输方式 get post //第二个参数：处理文件 xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式） //第三个参数：同步或者异步方式，默认是异步true var url='/checkName.php?time='+new Date()+'&name='+$('username').value; xhr.open('GET',url,true); //send() 如果是get方式，写null或者为空 //如果是post，参数那就直接写要传输的内容 xhr.send(null); //4号线：接收3号线传来的数据，进行处理 xhr.onreadystatechange=function(){ //alert('现在的状态是：'+xhr.readyState); if(xhr.readyState==4){ //alert(xhr.responseText); $('inf').innerHTML=xhr.responseText; } } } } 用户名：密码：

处理页面checkName.php

原生封装的Ajax函数如下： //参数有四个：传输的方式，路径，数据，回调函数 function ajax(method,url,data,fnsuccess){ //1号线：创建ajax对象 var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); } else{ xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //2号线：发送http请求（准备数据，真正的发送） if(method=='GET' && data){ //如果是get方式，并且有data：传数据到服务器 url=url+'?'+data; } xhr.open(method,url,true); if(method=='GET'){ xhr.send(null); } else{ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(data); } //4号线：拿到的数据返回给调用ajax函数的地方 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ if(fnsuccess){ fnsuccess(xhr.responseText);//注意这里只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换用responseXML属性 } } else{ alert('出差了，出错状态是：'+xhr.status); } } } }

【本文地址】

如何用原生JS封装Ajax

如何用原生JS封装Ajax

今日新闻

推荐新闻